<template>
    <div class="register-dialog">
        <h2>用户注册</h2>
        <!-- 手机号验证码注册 -->
        <div v-if="registerType === 'phone'">
            <div class="form-group">
                <label>手机号</label>
                <input type="text" v-model="registerForm.phone" placeholder="请输入手机号">
            </div>
            <div class="form-group">
                <label>验证码</label>
                <div class="verify-code-group">
                    <input type="text" v-model="registerForm.verifyCode" placeholder="请输入验证码">
                    <button 
                        class="get-code-btn" 
                        :disabled="isCountingDown"
                        @click="getVerifyCode"
                    >
                        {{ countDownText }}
                    </button>
                </div>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" v-model="registerForm.password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <button class="submit-btn" @click="handleRegister">注册</button>
            </div>
        </div>
    </div>
</template>

<script>
import { sendSmsCode } from '@/api/user'
export default {
    name: 'Register',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            registerType: 'phone',
            registerForm: {
                phone: '',
                verifyCode: '',
                password: ''
            },
            countdown: 0,
            isCountingDown: false
        }
    },
    computed: {
        countDownText() {
            return this.isCountingDown ? `${this.countdown}秒后重新获取` : '获取验证码'
        }
    },
    methods: {
        async getVerifyCode() {
            if (!this.registerForm.phone) {
                this.$message.error('请输入手机号')
                return
            }
            if (!/^1[3-9]\d{9}$/.test(this.registerForm.phone)) {
                this.$message.error('请输入正确的手机号')
                return
            }
            
            try {
                await sendSmsCode(this.registerForm.phone)  
                this.startCountDown()
            } catch (error) {
                this.$message.error('获取验证码失败')
            }
        },
        startCountDown() {
            this.isCountingDown = true
            this.countdown = 60
            const timer = setInterval(() => {
                this.countdown--
                if (this.countdown <= 0) {
                    clearInterval(timer)
                    this.isCountingDown = false
                }
            }, 1000)
        },
        async handleRegister() {
            if (!this.registerForm.phone || !this.registerForm.verifyCode) {
                this.$message.error('请填写完整信息')
                return
            }
            try {
                // TODO: 调用注册接口
                this.$message.success('注册成功')
                this.$router.push('/login')
            } catch (error) {
                this.$message.error('注册失败')
            }
        }
    }
}
</script>

<style scoped>
.register-dialog {
    /* 位于中心位置 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
}

.verify-code-group {
    display: flex;
    gap: 10px;
}

.verify-code-group input {
    flex: 1;
}

.get-code-btn {
    width: 120px;
    padding: 10px;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.get-code-btn:disabled {
    background: #a0cfff;
    cursor: not-allowed;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.submit-btn:hover {
    background: #66b1ff;
}
</style>
